{% extends "title_base.html" %}

{% block title %}
    {% load static %}
    <link type="image/x-icon" rel="shortcut icon" href="{% static 'favicon.ico' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/common.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/ranking.css' %}">
</head>

<body>
    <div class="header">
        <a href="/" class="logo" title="首页"><img alt="我的音乐" src="{% static 'image/logo.png' %}"></a>
        <div class="search-box">
            <form id="searchForm" action="{% url 'search' 1 %}" method="post" target="_blank">
                {% csrf_token %}
                <div class="search-keyword">
                    <input name="kword" type="text" class="keyword" maxlength="120" placeholder="音乐节" />
                </div>
                <input id="subSerch" type="submit" class="search-button" value="搜 索" />
            </form>
            <div id="suggest" class="search-suggest"></div>
            <div class="search-hot-words">
                {% for song in search_song %}
                <a target="play" href="{% url 'play' song.song.song_id %}">{{ song.song.song_name }}</a>
                {% endfor %}
            </div>
        </div>
    </div><!--end header-->

    <div class="nav-box">
        <div class="nav-box-inner">
            <ul class="nav clearfix">
                <li><a href="/">首页</a></li>
                <li><a href="{% url 'ranking' %}">歌曲排行</a></li>
                <li><a href="{% url 'home' 1 %}" target="_blank">用户中心</a></li>
            </ul>
        </div>
    </div><!--end nav-box-->

    <div class="wrapper clearfix">
        <!-- 左侧列表 -->
        <div class="side">
            <!-- 子类分类排行导航 -->
            <div class="side-nav">
                <div class="nav-head">
                    <a href="{% url 'ranking' %}">所有歌曲分类</a>
                </div>
                <ul id="sideNav" class="cate-item">
                    {% for item in All_list %}
                    <li class="computer">
                        <div class="main-cate">
                            <a href="{% url 'ranking' %}?type={{ item.song_type }}" class="main-title">{{ item.song_type }}</a>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div><!-- 左侧列表 end -->

        <!-- 主内容区 -->
        <div class="main">
            <h1>打开摄像头并显示视频流</h1>
            <!-- 视频流显示区域 -->
            <video id="video" autoplay muted width="720" height="560"></video>
            
            <script defer src="face-api.min.js"></script>
            <script defer src="face-recognition.js"></script>
            
            

        </div><!--end main-->
    </div><!--end wrapper-->
</body>
{% endblock %}
